<template>
  <div>
    <ContentTitle :info="info" />
    <ListBox
      :transObj="transObj"
      :haveOperation="haveOperation"
      :haveSerialNumber="haveSerialNumber"
      :cTData="cTData"
      @clickDel="handleDel"
      @clickEdit="handleEdit"
    ></ListBox>

    <!-- 添加信息弹窗 -->
    <el-dialog
      v-model="centerDialogVisible"
      title="新增密钥"
      width="30%"
      @close="closeDialog"
      center
    >
      <el-form
        :label-position="'right'"
        label-width="100px"
        :model="editObj"
        style="max-width: 460px"
      >
        <el-form-item v-if="editObj.id" label="用户id">
          <el-input disabled v-model="editObj.id" />
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="editObj.account" />
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="editObj.username" />
        </el-form-item>
        <!-- <el-form-item label="类型">
    <el-input v-model="editObj.type" />
   </el-form-item> -->
        <el-form-item label="类型" prop="online">
          <el-select v-model="editObj.type" placeholder="选择用户">
            <el-option label="管理员" value="2" />
            <el-option label="用户" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="editObj.desc" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm(editObj)"
            >确认</el-button
          >
          <el-button @click="cancelForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <DelDialog ref="delDialog" @certainDel="certainDel"></DelDialog>
  </div>
</template>
 
 <script setup>
import { ref, onMounted, reactive } from "vue";
import * as api from "@/api/index";
import ListBox from "@/components/ListBox.vue";
import ContentTitle from "@/components/ContentTitle.vue";
import DelDialog from "@/components/DelDialog.vue";

/**
 * 传给contentTitle子组件的值
 */
const info = ref({
  type: "子账号",
  text: "子账号列表",
  msg: " - 展示当前组织下的所有子账号，可修改子账号信息或删除子账号。",
});

/**
 * 传给Listbox子组件的参数
 */
const transObj = ref({
  account: "账号",
  username: "用户名称",
  type: "类型",
  cTime: "创建时间",
  uTime: "更新时间",
  desc: "描述",
});
let haveSerialNumber = true;
let haveOperation = true;
let cTData = ref([]);

//获取参数
const getList = () => {
  api.$accountList().then((res) => {
    cTData.value = res.data;
  });
};

//获取删除弹窗实例
const delDialog = ref();
let delObjIndex = ref(-1);
let delObjId = ref(-1);
//点击删除
const handleDel = (scope) => {
  delDialog.value.delDialog = true;
  delObjIndex = scope.index;
  delObjId = scope.row.id;
};
//点击确认删除
const certainDel = () => {
  // 发送请求删除元素
  api.$accountDel({ id: delObjId }).then((res) => {
    cTData.value.splice(delObjIndex, 1);
    delDialog.value.delDialog = false;
  });
};

let centerDialogVisible = ref(false);
let editObj = reactive({
  id: "",
  account: "",
  username: "",
  type: "",
  desc: "",
  uTime: "",
});
let editIndex = ref(0);
//修改模块
const handleEdit = (rowObj) => {
  let objectEdit = JSON.parse(JSON.stringify(rowObj));
  centerDialogVisible.value = true;
  // console.log(rowObj.index);
  editObj.id = objectEdit.row.id;
  editObj.account = objectEdit.row.account;
  editObj.username = objectEdit.row.username;
  editObj.type = objectEdit.row.type;
  editObj.desc = objectEdit.row.desc;
  editIndex.value = objectEdit.index;
  // editObj.id = row;
};

const submitForm = () => {
  // console.log(editObj);
  api.$accountEdit(editObj).then((res) => {
    // console.log(res);
    // editObj.uTime = res.data.uTime;
    // console.log(res.data);
    cTData.value.splice(editIndex.value, 1, res.data);
    centerDialogVisible.value = false;
  });
};
//点击取消
const cancelForm = () => {
  centerDialogVisible.value = false;
};
onMounted(() => {
  getList();
});
</script>
 
 
 <style lang='less'>
</style>